<form class="form-horizontal">

    <uib-tabset active="active" type="pills">
        <uib-tab index="0" ng-click="node.type='default'">
            <uib-tab-heading>
                DEFAULT
            </uib-tab-heading>
            <br>
            <div class="alert alert-info text-small">
                Konga will connect directly to Kong's admin API.<br>
                This method is mainly suitable for demo scenarios or internal access (ex. localhost).<br>
                Kong's admin API <strong class="text-danger">should not</strong> be publicly exposed.
            </div>

        </uib-tab>
        <uib-tab index="1" ng-click="node.type='key_auth'">
            <uib-tab-heading>
               KEY AUTH
            </uib-tab-heading>
            <br>
            <div class="alert alert-info text-small">
                Konga will connect to Kong's admin via an exposed "loop-back" API using key authentication.<br>
                <a href="https://getkong.org/docs/latest/secure-admin-api/#kong-api-loopback" target="_blank">Check out how to setup an API key based "loop-back" API</a>.
            </div>

        </uib-tab>
        <uib-tab index="2" ng-click="node.type='jwt'">
            <uib-tab-heading>
                JWT AUTH
            </uib-tab-heading>
            <br>
            <div class="alert alert-info text-small">
                Konga will connect to Kong's admin via an exposed "loop-back" API using JWT authentication.<br>
                <a href="https://getkong.org/docs/latest/secure-admin-api/#kong-api-loopback" target="_blank">Check out how to setup a JWT based "loop-back" API</a>.
            </div>
        </uib-tab>
        <uib-tab index="3" ng-click="node.type='basic_auth'">
            <uib-tab-heading>
                BASIC AUTH
            </uib-tab-heading>
            <br>
            <div class="alert alert-info text-small">
                Konga will connect to Kong's admin using Basic authentication. It is strongly recommended to use SSL/TLS encryption on Kong.<br>
            </div>
        </uib-tab>
    </uib-tabset>
    <div class="col-md-12">
        <div class="form-group" ng-class="{'has-error' : errors.name}">
            <label class="control-label">Name <span class="text-danger">*</span></label>
            <input ng-model="node.name" class="form-control" placeholder="A unique connection name" required="required">
            <div class="text-danger" ng-if="errors.name" data-ng-bind="errors.name"></div>
        </div>
        <div class="form-group" ng-class="{'has-error' : errors.kong_admin_url}">
            <label class="control-label">
                {{(node.type == 'default' || node.type == 'basic_auth')? 'Kong Admin' : 'Loopback API'}} URL
                <span class="text-danger">*</span></label>
            <input type="url" ng-model="node.kong_admin_url" class="form-control" placeholder="The URL to Kong's {{node.type == 'default' ? 'admin' : 'Loopback'}} API" required="required">
            <div class="text-danger" ng-if="errors.kong_admin_url" data-ng-bind="errors.kong_admin_url"></div>
        </div>

        <div ng-switch="node.type">

            <div ng-switch-when="key_auth">
                <div class="form-group" ng-class="{'has-error' : errors.kong_api_key}">
                    <label class="control-label">API KEY <span class="text-danger">*</span></label>
                    <input ng-model="node.kong_api_key" ng-required="node.type=='api_key'" class="form-control" placeholder="The `apikey` ...">
                    <div class="text-danger" ng-if="errors.kong_api_key" data-ng-bind="errors.kong_api_key"></div>

                </div>
            </div>
            <div ng-switch-when="jwt">
                <div class="form-group" ng-class="{'has-error' : errors.jwt_algorithm}">
                    <label class="control-label">Algorithm</label>
                    <select ng-model="node.jwt_algorithm" class="form-control">
                        <option value="HS256">HS256</option>
                        <option value="RS256">RS256</option>
                    </select>
                </div>
                <div class="form-group" ng-class="{'has-error' : errors.jwt_key}">
                    <label class="control-label">Key <span class="text-danger">*</span></label>
                    <input ng-model="node.jwt_key" ng-required="node.type=='jwt'" class="form-control" placeholder="The JWT identification key">
                    <div class="text-danger" ng-if="errors.jwt_key" data-ng-bind="errors.jwt_key"></div>
                </div>
                <div class="form-group" ng-class="{'has-error' : errors.jwt_secret}">
                    <label class="control-label">Secret <span class="text-danger">*</span></label>
                    <input ng-model="node.jwt_secret" ng-required="node.type=='jwt'" class="form-control" placeholder="The JWT secret">
                    <div class="text-danger" ng-if="errors.jwt_secret" data-ng-bind="errors.jwt_secret"></div>
                </div>
            </div>
            <div ng-switch-when="basic_auth">
                <div class="form-group" ng-class="{'has-error' : errors.username}">
                    <label class="control-label">Username <span class="text-danger">*</span></label>
                    <input ng-model="node.username" ng-required="node.type=='basic_auth'" class="form-control" placeholder="The Basic Authentication Username">
                    <div class="text-danger" ng-if="errors.username" data-ng-bind="errors.username"></div>
                </div>
                <div class="form-group" ng-class="{'has-error' : errors.password}">
                    <label class="control-label">Password <span class="text-danger">*</span></label>
                    <input ng-model="node.password" ng-required="node.type=='basic_auth'" class="form-control" placeholder="The Basic Authentication Password" type="password">
                    <div class="text-danger" ng-if="errors.password" data-ng-bind="errors.password"></div>
                </div>
            </div>
        </div>


        <!--<div class="form-group" ng-class="{'has-error' : errors.netdata_url}">-->
            <!--<label class="control-label">Netdata URL</label>-->
            <!--<input ng-model="node.netdata_url" class="form-control" placeholder="ex http://my-netdata-server:19999">-->
            <!--<div class="text-danger" ng-if="errors.netdata_url" data-ng-bind="errors.netdata_url"></div>-->
            <!--<small class="help-block">Access real-time API metrics by utilizing the power of netdata and statsd.</small>-->
        <!--</div>-->
    </div>


    <br>
    <div class="form-group">
        <div class="col-md-12">
            <button type="submit" data-ng-disabled="busy" class="btn btn-primary btn-block" ng-click="create()">
                <i class="mdi mdi-check" ng-if="!busy"></i>
                <fading-circle-spinner class="spinner spinner-invert pull-left" ng-if="busy"></fading-circle-spinner>
                {{node.id ? "update" : "create"}} connection
            </button>
        </div>
    </div>
</form>